<template>
  <div id="Choiceness">
    <ul v-if="contents.length===0" class="nothing">还没有内容</ul>
    <ul id="choicnessVessels">
      <li v-for="(item,index) in contents" :key="item.menuFatherId" :class="[(index+1)%3==0?'delLi':'']">
        <a @click="jump(item.menuFatherId)">
<!--          <img class="coverImg" :src="item.menuFatherSrc" alt="">-->
          <el-avatar class="coverImg" :src="item.menuFatherSrc" @error="errorHandler">
            <img class="cover_img" src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
          </el-avatar>
          <div class="introduce">
            <p class="title">{{item.menuFatherName}}</p>
            <p class="menuNum">{{Nums(item.menuNum)}}道菜谱</p>
          </div>
        </a>
      </li>
    </ul>
    <div class="page">
      <el-pagination
        class="pages"
        background
        layout="prev, pager, next"
        :total="pages.total"
        :hide-on-single-page=true
        :current-page="pages.current"
        :pager-count=5
        :page-size=12
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import cookie from '../../../cookien'
export default {
  name: 'Heat',
  data () {
    return {
      // 每页的精选菜谱数据
      contents: [
        // {
        //   coverImg: 'https://cp1.douguo.com/upload/caiku/4/8/1/400x266_483fbb6c27d944c2b049f4fff274c481.jpg',
        //   title: '浓情情人节甄选菜单',
        //   id: 1,
        //   clickJump: '#',
        //   menuNum: 10
        // }
      ],
      // 分页
      pages: {
        // 每页十条，共几条
        total: 0,
        // 当前页数
        vals: 1,
        // 自定义第几页
        current: 1
      }
    }
  },
  computed: {
    Nums (value) {
      return (value) => {
        if (value >= 100000000) {
          value = Math.round(value / 10000000) / 10 + '亿'
        } else if (value >= 10000000) {
          value = Math.round(value / 1000000) / 10 + 'kw'
        } else if (value >= 10000) {
          value = Math.round(value / 1000) / 10 + 'w'
        } else if (value >= 1000) {
          value = Math.round(value / 100) / 10 + 'k'
        }
        return value
      }
    }
  },
  methods: {
    errorHandler () {
      return true
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleCurrentChange (val) {
      // 当前页数
      this.pages.vals = val
      this.$axios({
        url: '/Menu/Visitor/findByMenuFatherByDoh',
        headers: {
          token: cookie.getToken()
        },
        params: {
          day: 4,
          pageNow: this.pages.vals,
          pageSize: 12
        }
      }).then(data => {
        if (data.data.code === 200) {
          this.pages.total = data.data.object.total
          this.contents = data.data.object.list
          for (var i = 0; i < data.data.object.list.length; i++) {
            if (data.data.object.list[i].menuIds === '') {
              this.contents[i].menuNum = 0
            } else {
              this.contents[i].menuNum = data.data.object.list[i].menuIds.split(',').length
            }
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 跳转页面
    jump (id) {
      this.$router.push({
        name: 'MenuListDetails',
        params: {
          id: id
        }
      })
    }
  },
  mounted () {
    this.$axios({
      url: '/Menu/Visitor/findByMenuFatherByDoh',
      headers: {
        token: cookie.getToken()
      },
      params: {
        day: 4,
        pageNow: 1,
        pageSize: 12
      }
    }).then(data => {
      console.log(data)
      if (data.data.code === 200) {
        this.pages.total = data.data.object.total
        this.contents = data.data.object.list
        for (var i = 0; i < data.data.object.list.length; i++) {
          if (data.data.object.list[i].menuIds === '') {
            this.contents[i].menuNum = 0
          } else {
            this.contents[i].menuNum = data.data.object.list[i].menuIds.split(',').length
          }
        }
      }
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>
<style>
.el-avatar>img{
  width: 100%;
}
</style>
<style lang="less" scoped>
#Choiceness{
  width: 100%;
  #choicnessVessels{
    overflow: auto;
    list-style: none;
    .delLi{
      margin-right: 0px;
    }
    li{
      float: left;
      position: relative;
      width: 306px;
      height: 172px;
      border-radius: 8px;
      overflow: hidden;
      margin: 0 41px 41px 0;
      a{
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: black;
        .coverImg{
          width: 100%;
          height: 200px;
          background-size: cover;
          background-position: center;
          vertical-align: bottom;
          border-radius: 8px;
          .cover_img{
            width: 100% !important;
          }
        }
        .introduce{
          width: 100%;
          height: 100%;
          position: absolute;
          //background: rgba(0,0,0,.14);
          top: 0;
          left: 0;
          padding-top: 50px;
          .title{
            font-weight: bold;
            font-size: 16px;
            color: #FFF;
            width: 100%;
            padding: 0 10px;
            text-align: center;
          }
          .menuNum{
            font-size: 13px;
            color: #FFF;
            width: 100%;
            padding: 0 10px;
            text-align: center;
            margin-top: 10px;
          }
        }
      }
    }
  }
  .pages{
    display: flex;
    justify-content:center;
    flex-wrap:wrap;
  }
  .nothing{
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: rgba(255, 179, 26, .6);
  }
}
</style>
